<template>
  <!-- 利用 el-table 模拟微博动态展示，保留原有数据请求逻辑 -->
  <el-table :data="tableData" stripe style="width: 100%" border  @row-click="handleRowClick">
    <!-- 自定义一列，用来渲染类似微博动态的内容 -->
    <el-table-column label="微博动态" align="center">
      <template #default="scope">
        <div class="weibo-card">
          <!-- 头像及发布者信息区域 -->
          <div class="weibo-card__header">
            <div class="avatar-container">
              <img :src="'/img'+scope.row.tx" alt="avatar" class="weibo-card__avatar" />
              <span class="weibo-card__nickname">{{ scope.row.yhm }}</span>
            </div>
            <div class="header-content">
              <div class="weibo-card__meta">
                {{ scope.row.time }} 来自 微博网页版
              </div>
              <div class="weibo-card__meta">
               标题# {{ scope.row.title }}
              </div>
            </div>
          </div>
          <!-- 动态内容区域，对应原 text 字段 -->
          <div class="weibo-card__content">
            {{ scope.row.text }}
            <!-- 假设数据里有图片字段 images，可循环展示图片，这里简单模拟单图 -->
            <div class="weibo-card__image" v-if="scope.row.url && scope.row.url.trim()">
              <img
                  v-for="(imgUrl, index) in scope.row.url.split(',')"
                  :key="index"
                  :src="'/img'+imgUrl.trim()"
                  alt="weibo-img"
                  class="imgs"
              />
            </div>
          </div>
          <!-- 互动按钮区域 -->
          <div class="weibo-card__actions">
              <span class="weibo-card__action">
              <el-icon class="el-icon"><ChatDotRound /></el-icon>
                <!-- 假设接口返回评论数字段 commentCount，没有可自行模拟或隐藏 -->
              {{ scope.row.commentCount || 0 }}
              </span>
            <span class="weibo-card__action">
              <el-icon class="el-icon"><StarFilled /></el-icon>
              <!-- 假设接口返回点赞数字段 likeCount，没有可自行模拟或隐藏 -->
              {{ scope.row.likeCount || 0 }}
            </span>
            <span class="weibo-card__action">
              <el-icon class="el-icon"><Share /></el-icon>
              <!-- 假设接口返回转发数字段 forwardCount，没有可自行模拟或隐藏 -->
              {{ scope.row.forwardCount || 0 }}
            </span>
            <span class="weibo-card__action">
              <el-icon class="el-icon"><View /></el-icon>
              <!-- 假设接口返回浏览数字段 browse，没有可自行模拟或隐藏 -->
                          {{ scope.row.browse || 0 }}
            </span>
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted } from 'vue';
// 引入 Element Plus 图标，按需添加
import { ChatDotRound, StarFilled, Share } from '@element-plus/icons-vue';
import router from "../router"
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const userId = ref(userStore.id)

const tableData = ref([]);

onMounted(() => {
  doList();
});

const doList = async () => {
  const { data } = await axios.get('/api/postAndUser/fanId/'+userId.value);
  console.log(data);
  tableData.value = data;
};
const handleRowClick = (row) => {
  router.push(`/poster?id=${row.id}`)
}
</script>

<style scoped>
.weibo-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.weibo-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.weibo-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 4px;
}
.weibo-card__info {
  display: flex;
  flex-direction: column;
}
.weibo-card__nickname {
  font-weight: bold;
  color: #333;
}
.weibo-card__meta {
  font-size: 12px;
  color: #999;
}
.weibo-card__content {
  margin: 8px 0;
  color: #333;
  line-height: 1.6;
}
.weibo-card__image {
  margin-top: 8px;
}
.weibo-card__image img {
  max-width: 200px;
  border-radius: 4px;
}
.weibo-card__actions {
  display: flex;
  gap: 24px;
  color: #666;
  margin-top: 8px;
  cursor: pointer;
}
.weibo-card__action {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.weibo-card__action:hover {
  color: #409eff;
}
.imgs{
  width: 133px;
  height: 133px;
  margin: 0 2px;
}
.el-icon{
  font-size: 20px;
}
</style>